<template>
  <el-dialog
    title="预览"
    :visible.sync="dialogVisible"
    width="375px"
    center
  >
    <div class="preview-canvas">
      <div v-for="element in schema" :key="element.id" class="canvas-component">
        <component :is="element.type" v-bind="element.props" />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import TitleBar from '@/components/editor-components/TitleBar.vue';
import Button from '@/components/editor-components/Button.vue';
import Text from '@/components/editor-components/Text.vue';

export default {
  name: 'PreviewDialog',
  components: {
    'title-bar': TitleBar,
    'button': Button,
    'text': Text,
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    schema: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('update:visible', val);
      }
    }
  }
};
</script>

<style scoped>
::v-deep .el-dialog__body {
  padding: 0;
}

.preview-canvas {
  min-height: 667px;
  background-color: #fff;
}

.canvas-component {
  border-bottom: 1px dashed #eee;
}
</style>